<template>
  <div class="ranking-list find-music-cpns">
    <div class="rang-content">
      <zj-header
        name="官方榜"
        style="margin-top: 20px; width: 100%"
        :show="false"
      ></zj-header>
      <template v-for="(item, index) in allSongsList" :key="index">
        <rank-card :cards="item"></rank-card>
      </template>
      <zj-header
        name="全球榜"
        style="margin-top: 30px; width: 100%"
        :show="false"
      ></zj-header>
      <div class="rang-card">
        <card-item
          v-for="item in allTopList"
          :key="item.id"
          :item="item"
          v-bind="configObj"
          style="margin-right: 10px"
        ></card-item>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import ZjHeader from '@/base-ui/header'
import RankCard from '@/components/page-find-music/page-ranking-list/rank-card'
import CardItem from '@/base-ui/card-item'
import { InitDatas } from '../hook/ranking-list'
import { validationAging } from '@/utils/validation-aging'
import LocalCache from '@/utils/cache'

export default defineComponent({
  components: {
    ZjHeader,
    RankCard,
    CardItem
  },
  setup() {
    const { getTopList, allSongsList, allTopList } = InitDatas()
    // const nowTime = LocalCache.getCache('SongsTime') - 864000000
    const nowTime = LocalCache.getCache('SongsTime')
    let flag = validationAging(nowTime)
    if (!nowTime || flag) {
      // 重新请求
      getTopList()
    } else {
      //本地数据
      allSongsList.value = JSON.parse(LocalCache.getCache('allSongsList'))
      allTopList.value = JSON.parse(LocalCache.getCache('allTopList'))
    }
    // 配置
    const configObj = {
      wth: '18%',
      topShow: false,
      userShow: false
    }
    return {
      allSongsList,
      allTopList,
      configObj
    }
  }
})
</script>

<style scoped lang="less">
.ranking-list {
  width: 90%;
  .rang-content {
    width: 90%;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;

    .rang-card {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-start;
    }
  }
}
</style>
